<template>
  <div>
    <RouterView />
    <div id="app"> 
    <nav class="navbar">  
      <img src="/logo.png" alt="图表信息" class="icon" />
          
      <ul>  
        <li><router-link to="/main">首页</router-link></li>  
        <li><router-link to="/search">全部商品</router-link></li>  
        <li><router-link to="/compare">商品比价</router-link></li>  
        <!-- 添加更多导航链接 -->  
      </ul>  
    </nav>  
    <div class="content">
      <h1>店铺销售统计</h1>
      <div v-show="loading" class="loading">加载中...</div>
      <div ref="chartRef" class="chart-area"></div>
      <input v-model="productName" placeholder="请输入产品名称进行搜索" @keyup.enter="fetchData">
      <button @click="fetchData" class="search-btn">搜索</button>
    </div>
  </div>
  </div>
</template>

<style scoped>/* General Styles */
body, html {
  margin: 0;
  padding: 0;
  width: 100%; /* Make sure html and body have full width */
  height: 100%; /* Make sure html and body have full height */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header and navigation styles */



/* Content styles */
.content {
  text-align: center;
  padding: 40px 10%;
  width: 80%; /* Main content width, centering it by margin */
  margin: auto; /* Auto margins for horizontal centering */
}

.chart-area {
  width: 100%; /* Chart area takes full width of its container */
  height: 400px; /* Fixed height for chart */
  background-color: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

</style>





<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      productName: '',
      storeData: [],
      chart: null,
      loading: false,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    async fetchData() {
  if (!this.productName.trim()) {
    this.displayError('请输入有效的产品名称！');
    return;
  }
  this.loading = true;
  try {
    const response = await axios.get(`http://localhost:8080/api/stores/top/${encodeURIComponent(this.productName)}`);
    console.log('Received data:', response.data); // 打印接收到的数据
    this.storeData = response.data;
    this.updateChart();
  } catch (error) {
    this.handleError(error);
  } finally {
    this.loading = false;
  }
},
    initChart() {
      if (!this.$refs.chartRef) return; // Ensure the ref exists
      this.chart = echarts.init(this.$refs.chartRef);
      const option = {
        title: { text: '店铺销售统计' },
        tooltip: {},
        xAxis: { type: 'category', data: [] },
        yAxis: { type: 'value' },
        series: [{ name: '产品数量', type: 'bar', data: [] }]
      };
      this.chart.setOption(option);
    },
    updateChart() {
      if (!this.chart) return;
      const option = {
        xAxis: {
      data: this.storeData.map(item => item.storeName || '未知店铺') // 使用默认值防止null
    },
    series: [{
      data: this.storeData.map(item => item.count)
    }]
      };
      this.chart.setOption(option);
    },
    handleError(error) {
      console.error("Failed to fetch data:", error);
      this.displayError('无法加载数据，请检查控制台了解详情。');
    },
    displayError(message) {
      alert(message);
    }
  }
}
</script>

<style scoped>
.loading {
  text-align: center;
  display: none; /* Initially hidden */
}
h1 {
  text-align: center;
  margin-bottom: 20px;
}
input {
  margin: 10px;
  padding: 8px;
  width: 200px;
}
button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}

.navbar {  
   /* 固定在顶部 */  
  top: 0;  
  left: 0;  
  right: 0;  
  height: 100px; /* 设置导航栏高度 */  
  background-color: #333; /* 设置背景颜色 */  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  
}  
.navbar ul {  
  list-style-type: none;  
  margin: 0;  
  padding: 0;  
  display: flex;
  padding-left: 50px; /* 设置内边距，让文字离左边有一定的距离 */  
  
}  

#app {  
  display: flex;  
  flex-direction: column;  
  height: 100vh; /* 使应用占据整个视口高度 */  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  

</style>
